<template>

  <view class="myaddress">
    <!-- 按钮结构 -->
    <view class="btnbox" v-if="JSON.stringify(address) === '{}'">
      <button @click="getAddress" type="primary" size="mini">请选择收货地址 +</button>
    </view>
    <!-- 地址结构 -->
    <view class="infoBox" v-else @click="getAddress">
      <view class="row1">
        <view class="row1-left">
          收货人：{{address.userName}}
        </view>
        <view class="row1-right">
          电话：{{address.telNumber}}
          <uni-icons type="forward" size="20"></uni-icons>
        </view>
      </view>
      <view class="row2">
        收货地址：{{fullAddress}}
      </view>
    </view>
    <image class="footImg" src="../../static/images/cart_border@2x.png" mode=""></image>
  </view>

</template>

<script>
  import {
    mapMutations,
    mapState,
    mapGetters
  } from "vuex"
  export default {
    name: "my_address",
    data() {
      return {
        // address: {}
      };
    },
    computed: {
      ...mapState('user', ['address']),
      ...mapGetters('user', ['fullAddress'])
    },
    methods: {
      ...mapMutations('user', ['setAddress']),
      async getAddress() {
        const [err, addressObj] = await uni.chooseAddress()
        // 保存收货地址
        if (!err) {
          // console.log(addressObj);
          // this.address = addressObj
          this.setAddress(addressObj)
        }
      }
    }
  }
</script>


<style lang="scss">
  .myaddress {
    .btnbox {
      text-align: center;
      padding: 30px 0;
    }

    .infoBox {
      font-size: 14px;
      padding: 10px;

      .row1 {
        padding: 20px 0;
        display: flex;
        justify-content: space-between;

        .row1-left {}

        .row1-right {}
      }

      .row2 {
        padding-bottom: 20px;
      }
    }

    .footImg {
      display: block;
      width: 100%;
      height: 5px;
    }
  }
</style>
